<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript Demo</title>
    <style>
        #parent {
            background: pink;
            width: 600px;
            height: 300px;
        }

        .sub {
            background: mistyrose;
        }
    </style>
    <script>
        // 添加子节点
        function addSubNode() {
            var subEle = document.createElement("p"); // 创建新元素
            subEle.setAttribute("class", "sub"); // 设置class属性
            subEle.innerText = "新增子视图"; // 设置文本节点内容
            subEle.style.color = "green"; // 设置样式: 文本颜色设置成绿色
            document.getElementById("parent").appendChild(subEle); // 添加到父视图中
        }
        // 修改节点属性
        function modifyProperty() {
            var lastSubEle = document.getElementById("parent").lastChild; // 获取父视图中最后一个子视图
            lastSubEle.removeAttribute("class"); // 移除class属性
            console.log(lastSubEle.getAttribute("class"));
            lastSubEle.innerText = "被修改的子视图"; // 修改文本内容
            lastSubEle.style.color = "red"; // 修改样式: 文本颜色设置成红色
        }
        // 删除子节点
        function deleteSubNode() {
            var supEle = document.getElementById("parent"); // 获取父节点
            supEle.removeChild(supEle.lastChild); // 从父节点中删除最后一个子节点
        }
    </script>
</head>

<body>
    <div id="parent">
        <p class="sub">子视图</p>
    </div><br>
    <button onclick="addSubNode()">添加子节点</button>
    <button onclick="modifyProperty()">修改节点属性</button>
    <button onclick="deleteSubNode()">删除子节点</button>
</body>

</html>